import React from 'react'
import { Link, useNavigate, useRoutes } from 'react-router-dom'
// import Home from './pages/Home/Home'
// import About from './pages/About'
// import Login from './pages/Login'
// import NotFound from './pages/NotFound'
// import HomeRecommand from './pages/Home/HomeRecommand'
// import HomeRank from './pages/Home/HomeRank'
// import HomeSongMenu from './pages/Home/HomeSongMenu'
// import Category from './pages/Category'
// import Order from './pages/Order'
// import HomeRecommandDetail from './pages/Home/HomeRecommandDetail'
// import User from './pages/User'
import routes from './router'


export function App(props) {
  // hooks只能在顶层使用不能放到嵌套函数中
  const navigate = useNavigate()
  function navigateTo(path) {
    navigate(path)
  }
  return (
    <div className='app'>
      <div className="header">
        Header
        <div className="nav">
          <Link to='/home'>
            <button>首页</button>
          </Link>
          <Link to='/about'>
            <button>关于</button>
          </Link>
          <Link to='/login'>
            <button>登录</button>
          </Link>
          <Link to='/user?name=xxx&age=18'>
            <button>用户</button>
          </Link>
          <button onClick={e => navigateTo('/category')}>分类</button>
          <span onClick={e => navigateTo('/order')}>订单</span>
        </div>
        <hr />
      </div>
      <div className="content">
      {/* 配置映射关系： path => component */}
      {/* <Routes>
        <Route path='/' element={<Navigate to='/home'></Navigate>}></Route>
        <Route path='/home' element={<Home></Home>}>
          <Route path='/home' element={<Navigate to='/home/recommand'></Navigate>}></Route>
          <Route path='/home/recommand' element={<HomeRecommand></HomeRecommand>}>
            <Route path='/home/recommand/detail/:id' element={<HomeRecommandDetail/>}></Route>
          </Route>
          <Route path='/home/rank' element={<HomeRank></HomeRank>}></Route>
          <Route path='/home/songMenu' element={<HomeSongMenu></HomeSongMenu>}></Route>
        </Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/login' element={<Login></Login>}></Route>
        <Route path='/category' element={<Category></Category>}></Route>
        <Route path='/order' element={<Order></Order>}></Route>
        <Route path='/user' element={<User />}/>
        <Route path='*' element={<NotFound></NotFound>}></Route>
      </Routes> */}
      { useRoutes(routes) }
      </div>
      <div className="footer">
        <hr />
        footer
      </div>
    </div>
  )
}

export default App